"use client"

import type React from "react"

import { useState } from "react"
import { CopyOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { message, Modal } from "antd"
import type { Project, Department } from "../types"

const { confirm } = Modal

interface ProjectCardProps {
  project: Project
  department?: Department
  modulesCount: number
  hostsBlocksCount: number
  onEdit: (project: Project) => void
  onDelete: (id: string) => void
  onClick?: () => void
}

const ProjectCard = ({
  project,
  department,
  modulesCount,
  hostsBlocksCount,
  onEdit,
  onDelete,
  onClick,
}: ProjectCardProps) => {
  const [isDeleting, setIsDeleting] = useState(false)

  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation()
    onEdit(project)
  }

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation()

    confirm({
      title: "确定要删除此项目吗?",
      icon: <ExclamationCircleOutlined />,
      content: `删除项目 "${project.name}" 将同时删除其下所有模块和 Hosts 配置，此操作不可恢复。`,
      okText: "确定",
      okType: "danger",
      cancelText: "取消",
      onOk() {
        setIsDeleting(true)
        try {
          onDelete(project.id)
          message.success("删除成功")
        } catch (error) {
          message.error("删除失败")
        } finally {
          setIsDeleting(false)
        }
      },
    })
  }

  // Generate a consistent color based on project name
  const getProjectColor = () => {
    const hash = project.name.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
    const hue = hash % 360
    return `hsl(${hue}, 70%, 65%)`
  }

  // Get first letter of project name
  const getProjectInitial = () => {
    return project.name.charAt(0).toUpperCase()
  }

  return (
    <div
      className="project-card"
      onClick={onClick}
      style={{
        cursor: onClick ? "pointer" : "default",
        borderRadius: "12px",
        overflow: "hidden",
        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
        transition: "all 0.3s ease",
        border: "1px solid #f1f5f9",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        backgroundColor: "white",
      }}
    >
      <div
        className="project-card-content"
        style={{ padding: "20px", flex: 1, display: "flex", flexDirection: "column" }}
      >
        <div className="project-card-header">
          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
            <div
              style={{
                width: "40px",
                height: "40px",
                borderRadius: "50%",
                background: `linear-gradient(135deg, ${getProjectColor()} 0%, ${getProjectColor()}80 100%)`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "white",
                fontSize: "18px",
                fontWeight: "bold",
              }}
            >
              {getProjectInitial()}
            </div>
            <div className="project-card-title">{project.name}</div>
          </div>
          <span
            className={`badge env-${project.environment === "生产" ? "prod" : "dev"}`}
            style={{
              borderRadius: "12px",
              padding: "0 8px",
              fontSize: "12px",
              background: project.environment === "生产" ? "#fee2e2" : "#e0f2fe",
              color: project.environment === "生产" ? "#dc2626" : "#0284c7",
              border: "none",
            }}
          >
            {project.environment}
          </span>
        </div>
        <div className="project-card-description">{project.description || "暂无描述"}</div>
        <div className="project-card-meta">
          {department && (
            <span
              className={`badge dept-${department.code}`}
              style={{
                borderRadius: "12px",
                padding: "0 8px",
                fontSize: "12px",
                background: department.color ? `${department.color}20` : "#f3f4f6",
                color: department.color || "#4b5563",
                border: "none",
              }}
            >
              {department.name}
            </span>
          )}
        </div>
        <div className="project-card-stats">
          <div className="project-card-stat">{modulesCount} 个模块</div>
          <div className="project-card-stat">{hostsBlocksCount} 个配置</div>
        </div>
      </div>
      <div
        className="project-card-actions"
        style={{
          display: "flex",
          borderTop: "1px solid #f3f4f6",
          backgroundColor: "#f9fafb",
        }}
      >
        <button className="project-card-button" onClick={handleEdit}>
          <EditOutlined />
          <span>编辑</span>
        </button>
        <button className="project-card-button" onClick={(e) => e.stopPropagation()}>
          <CopyOutlined />
          <span>复制</span>
        </button>
        <button className="project-card-button danger" onClick={handleDelete}>
          <DeleteOutlined />
          <span>{isDeleting ? "删除中..." : "删除"}</span>
        </button>
      </div>
    </div>
  )
}

export default ProjectCard
